<template>
  <van-popup
    v-model="popupShow"
    closeable
    lock-scroll
    safe-area-inset-bottom
    @closed="handleClosed"
    style="width: 100%; height: 100%"
  >
    <div style="width: 100%; height: 100%">
      <video-player
        ref="videoPlayer"
        class="video-player vjs-custom-skin"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </div>
  </van-popup>
</template>
<script>
export default {
  props: {
    url: {
      type: String
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popupShow: false,
      playerOptions: {
        autoplay: false,
        height: document.documentElement.clientHeight,
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  watch: {
    show(newVal) {
      this.popupShow = newVal
      if (this.popupShow) {
        this.$nextTick(() => {
          this.$refs.videoPlayer.player.src(this.url)
          this.$refs.videoPlayer.player.play()
        })
      }
    }
  },
  methods: {
    handleClosed() {
      this.popupShow = false
      this.$refs.videoPlayer.player.pause()
      this.$emit('update:show', false)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.vjs-tech {
  width: 100% !important;
  height: 100% !important;
}
/deep/ .video-player {
  width: 100% !important;
  height: 100% !important;
}
/deep/ .video-js {
  width: 100% !important;
  height: 100% !important;
}
</style>
